<template>
    <div class="common-layout">
        <el-container>
            <!-- <el-aside width="200px"> -->
            <!-- <el-aside :width="asideWidth"> -->
            <el-aside>
                <div class="logo_box">
                    <!-- <el-icon size="40" color="#01eedc"> -->
                    <el-icon size="40">
                        <Shop />
                    </el-icon>
                    <span v-show="isShow">商城后台管理系统</span>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <el-icon size="45" @click="isShow = !isShow">
                        <!-- 默认展示的图标 -->
                        <!-- <Fold v-show="isShow" /> -->
                        <!-- 侧边栏收起的时候展示的图标 -->
                        <!-- <Expand v-show="!isShow" /> -->

                        <!-- <Fold v-if="isShow" />
                        <Expand v-else /> -->

						<component :is="iconName"></component>
                    </el-icon>
                    <p v-if="$store.state.userInfo.adminname">
                        欢迎： {{ $store.state.userInfo.adminname }}
                        <el-button @click="outLogin">退出登录</el-button>
                    </p>
                    <el-button v-else @click="goLogin">登录</el-button>
                </el-header>
                <el-main>
                    <h1>商品列表</h1>
                    <ul class="goods_box">
                        <li class="li_box" v-for="(item, index) in list" :key="index"> 
                            <img src="https://img12.360buyimg.com/n1/s450x450_jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg" alt="">
                            <div>{{ item.proname }}</div>
                            <div>￥{{ item.originprice }}</div>
                        </li>                      
                    </ul>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { Shop, Fold, Expand } from "@element-plus/icons-vue";
import { getProList } from "../api/home"
export default {
    data() {
        return {
            isShow: true,
            list: []
        };
    },
    methods: {
        //退出登录
        outLogin() {
            this.$store.commit('setUserInfo', {})
        },
        //登录
        goLogin() {
            this.$router.push('/login')
        }
    },
    mounted() {
        const list = getProList()
        console.log(list);
    },
	computed: {
		asideWidth () {
			return this.isShow ? '200px' : '50px'
		},
		iconName () {
			return this.isShow ? 'Fold' : 'Expand'
		}
	},
    components: {
        Shop,
        Fold,
        Expand,
        
    },
};
</script>

<style lang="scss" scoped>
// .common-layout {
//     height: 100%;
// }
// .common-layout .el-container {
// 	height: 100%;
// }

.common-layout {
    height: 100%;

    .el-container {
        height: 100%;

        .el-aside {
            background-color: rgb(217, 236, 255);
			// width: 200px;
			// width: asideWidth;	// 错误写法, 因为在 css 中 属性的属性值 绝对是一个字符串
			width: v-bind(asideWidth);	// 通过 v-bind 函数, 帮我们给 width 属性绑定一个 动态的值

            .logo_box {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .el-header {
            background-color: rgb(198, 226, 255);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .el-main {
            background-color: rgb(236, 245, 255);

            .goods_box {
                display: flex;
                flex-wrap: wrap;

                .li_box {
                    width: 200px;
                    height: 300px;
                    border: 1px solid black;
                    list-style: none;
                    padding: 10px;
                    margin-bottom: 20px;
                    margin-left: 10px;

                    img {
                        width: 200px;
                        height: 200px;
                        margin-bottom: 5px;
                    }

                    div {
                        font-size: 16px;
                    }
                }
            }
        }
    }
}
</style>
